<template>
  <div class="chatBox">
    <div class="wrapper">
      <img
        src="@/assets/img/icon/home/cancel.svg"
        class="cancel cp"
        alt=""
        @click="$emit('hide', false)"
      />
      <el-row class="row">
        <el-col
          :span="6"
          v-for="(item, index) in btnList"
          :key="index"
          @click="change(index)"
        >
          <div class="text-center header cp">
            <img
              v-if="currentIndex === item.index"
              class="icon mr-6"
              :src="item.active"
              alt=""
            />
            <img v-else class="icon mr-6" :src="item.normal" alt="" />
            <p>
              <span>{{ item.text }}</span>
              <span v-if="item.num">{{ item.num }}</span>
            </p>
          </div>
        </el-col>
      </el-row>
      <!-- 页面组件 -->
      <div class="page-box">
        <chat v-if="currentIndex == 0"></chat>
        <patientsInfo v-if="currentIndex == 1"></patientsInfo>
        <givePrescri v-if="currentIndex == 2"></givePrescri>
        <setTag v-if="currentIndex == 3"></setTag>
      </div>
    </div>
  </div>
</template>
<script>
import { btnList } from '../config/message'
import { defineComponent, ref } from 'vue'
import chat from './chat.vue'
import patientsInfo from './patientsInfo.vue'
import givePrescri from './givePrescri.vue'
import setTag from './setTag.vue'
export default defineComponent({
  name: 'chatBox',
  components: {
    chat,
    patientsInfo,
    givePrescri,
    setTag
  },

  setup() {
    let currentIndex = ref(0)
    const change = (index) => {
      currentIndex.value = index
    }
    return {
      currentIndex,
      btnList,
      change
    }
  }
})
</script>

<style lang="less" scoped>
.chatBox {
  height: 100%;
}
.wrapper {
  position: relative;
  .cancel {
    right: -67px;
    top: -35px;
    position: absolute;
  }
}
.row {
  border-bottom: 1px solid #cdcdcd;
  .header {
    padding: 16px 0;
    img {
      vertical-align: middle;
    }
    p {
      display: inline-block;
    }
  }
}
</style>
